<% if @pinned_stories.present? %>
  <div class="crayons-card mb-2 border-2 border-solid border-accent-brand">
    <header>
      <h3 class="crayons-subtitle-3 inline-flex items-center bg-accent-brand color-base-inverted pl-3 pr-4 py-2 ml-4 -mt-2 radius-default">
        <%= crayons_icon_tag(:pin, class: "mr-2", title: t("views.users.pin_icon")) %>
        <%= t("views.users.pinned") %>
      </h3>
    </header>
    <div class="p-4 pb-2 pt-3">
      <%= render partial: "articles/single_story", collection: @pinned_stories, as: :story, locals: { featured: false } %>
    </div>
  </div>
<% end %>
<% if @stories.present? %>
  <%= render "articles/single_story", story: @stories.first, featured: false %>
  <%= render user_comments_section if @user.comments_count.positive? %>
  <%= render partial: "articles/single_story", collection: @stories[1, @stories.size], as: :story, locals: { featured: false } %>
  <div class="placeholder-div"></div>
<% else %>
  <%= render user_comments_section if @user.comments_count.positive? %>
<% end %>
